<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .vol-box{
            border: 1px solid black;
            width: 400px;
            height: 40px;
            position: relative;
        }
        .vol-line{
            width: 360px;
            height: 6px;
            background-color: grey;
            position: absolute;
            left: 20px;
            top:17px;
        }
        .vol-point{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: radial-gradient(white,black);
            position: absolute;
            top: 10px;
            /*left: 10px;*/
        }
    </style>
</head>
<body>
    <div id="app">
        输入音量值：<input v-model.number="vol">
        <hr>
        <com :volume='vol' @change-vol='getVol'></com>
    </div>
    <script src='vue.js'></script>
    <script type="text/html" id="com">
        <div class='vol-box' @mousedown='mousedown' @mousemove='mousemove'>
            <div class="vol-line"></div>
            <div class="vol-point" :style='pointStyle'></div>
        </div>
    </script>
    <script>
        Vue.component('com',{
            template:'#com',
            data:function(){
                return {
                    isDown:false
                }
            },
            props:{
                volume:{
                    default:0.5,
                    type:Number,
                }
            },
            computed:{
                pointStyle(){
                    var left = this.volume*360 + 10
                    left = left<10?10:left
                    left = left>380?380:left
                    return {
                        left : left +'px'
                    }
                }
            },
            methods:{
                mousedown:function(e){
                    var x = e.pageX - this.$el.offsetLeft
                    this.$emit('change-vol',(x-20)/360)
                    this.isDown = true
                },
                mousemove:function(e){
                    if(this.isDown){
                        var x = e.pageX - this.$el.offsetLeft
                        this.$emit('change-vol',(x-20)/360)
                    }
                },
                mouseup:function(e){
                    this.isDown = false
                }
            },
            mounted:function(){
                window.addEventListener('mousemove',this.mousemove.bind(this))
                window.addEventListener('mouseup',this.mouseup.bind(this))
            }
        })
        new Vue({
            el:'#app',
            data:{
                vol:0.5
            },
            methods:{
                getVol(e){
                   this.vol = e
                }
            }
        })
    </script>
</body>
</html>